/**
 * 颜色类型
 */
export type Color = string | CanvasGradient | CanvasPattern;

/**
 * 文本对齐方式
 */
export enum TextAlign {
    LEFT = 'left',
    CENTER = 'center',
    RIGHT = 'right'
}

/**
 * 文本基线
 */
export enum TextBaseline {
    TOP = 'top',
    MIDDLE = 'middle',
    BOTTOM = 'bottom',
    ALPHABETIC = 'alphabetic',
    HANGING = 'hanging'
}

/**
 * 文本样式
 */
export interface TextStyle {
    font?: string;
    color?: Color;
    align?: TextAlign;
    baseline?: TextBaseline;
    lineHeight?: number;
    letterSpacing?: number;
    wordSpacing?: number;
    maxWidth?: number;
}

/**
 * 精灵帧
 */
export interface SpriteFrame {
    x: number;
    y: number;
    width: number;
    height: number;
    duration?: number; // 帧持续时间（毫秒）
}

/**
 * 精灵动画
 */
export interface SpriteAnimation {
    name: string;
    frames: SpriteFrame[];
    loop?: boolean;
    speed?: number; // 播放速度倍率
}

/**
 * 精灵数据
 */
export interface SpriteData {
    image: HTMLImageElement;
    frameWidth: number;
    frameHeight: number;
    animations?: SpriteAnimation[];
    defaultAnimation?: string;
}

/**
 * 渲染选项
 */
export interface RenderOptions {
    /**
     * 是否启用抗锯齿
     */
    antialias?: boolean;
    
    /**
     * 是否启用图像平滑
     */
    imageSmoothingEnabled?: boolean;
    
    /**
     * 图像平滑质量
     */
    imageSmoothingQuality?: 'low' | 'medium' | 'high';
    
    /**
     * 是否启用阴影
     */
    shadowEnabled?: boolean;
    
    /**
     * 阴影颜色
     */
    shadowColor?: Color;
    
    /**
     * 阴影模糊度
     */
    shadowBlur?: number;
    
    /**
     * 阴影偏移X
     */
    shadowOffsetX?: number;
    
    /**
     * 阴影偏移Y
     */
    shadowOffsetY?: number;
    
    /**
     * 是否启用裁剪
     */
    clipEnabled?: boolean;
    
    /**
     * 裁剪区域
     */
    clipRegion?: {
        x: number;
        y: number;
        width: number;
        height: number;
    };
}

/**
 * 渲染状态
 */
export interface RenderState {
    /**
     * 当前变换矩阵
     */
    transform: DOMMatrix;
    
    /**
     * 当前透明度
     */
    alpha: number;
    
    /**
     * 当前混合模式
     */
    compositeOperation: GlobalCompositeOperation;
    
    /**
     * 当前渲染选项
     */
    options: Required<RenderOptions>;
}

/**
 * 图形组件类型
 */
export enum GraphicsComponentType {
    SPRITE = 'Sprite',
    ANIMATED_SPRITE = 'AnimatedSprite',
    TEXT = 'Text',
    SHAPE = 'Shape',
    PARTICLE = 'Particle'
}

/**
 * 形状类型
 */
export enum ShapeType {
    RECTANGLE = 'Rectangle',
    CIRCLE = 'Circle',
    ELLIPSE = 'Ellipse',
    LINE = 'Line',
    POLYGON = 'Polygon',
    PATH = 'Path'
}

/**
 * 形状样式
 */
export interface ShapeStyle {
    /**
     * 填充颜色
     */
    fill?: Color;
    
    /**
     * 描边颜色
     */
    stroke?: Color;
    
    /**
     * 描边宽度
     */
    strokeWidth?: number;
    
    /**
     * 描边样式
     */
    strokeStyle?: 'solid' | 'dashed' | 'dotted';
    
    /**
     * 虚线样式
     */
    dashPattern?: number[];
    
    /**
     * 线帽样式
     */
    lineCap?: CanvasLineCap;
    
    /**
     * 线条连接样式
     */
    lineJoin?: CanvasLineJoin;
    
    /**
     * 线条连接处的最大斜接长度
     */
    miterLimit?: number;
}

/**
 * 粒子系统配置
 */
export interface ParticleSystemConfig {
    /**
     * 粒子数量
     */
    count: number;
    
    /**
     * 粒子生命周期（毫秒）
     */
    lifetime: number | [number, number];
    
    /**
     * 粒子大小
     */
    size: number | [number, number];
    
    /**
     * 粒子颜色
     */
    color: Color | Color[];
    
    /**
     * 粒子速度
     */
    speed: number | [number, number];
    
    /**
     * 粒子方向（弧度）
     */
    direction: number | [number, number];
    
    /**
     * 粒子重力
     */
    gravity?: number;
    
    /**
     * 粒子旋转速度（弧度/秒）
     */
    rotationSpeed?: number | [number, number];
    
    /**
     * 粒子缩放速度
     */
    scaleSpeed?: number | [number, number];
    
    /**
     * 粒子透明度变化速度
     */
    alphaSpeed?: number | [number, number];
    
    /**
     * 粒子纹理
     */
    texture?: HTMLImageElement;
    
    /**
     * 是否循环发射
     */
    loop?: boolean;
    
    /**
     * 发射间隔（毫秒）
     */
    emitInterval?: number;
    
    /**
     * 发射区域
     */
    emitArea?: {
        type: 'point' | 'circle' | 'rectangle';
        x?: number;
        y?: number;
        radius?: number;
        width?: number;
        height?: number;
    };
} 